<template>
    <div class="tableContainer">
        <el-form :inline="true"  class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="">
                <el-input class="elInput" v-model="key" placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="elBtn" type="primary" @click="selectData(0)">查询</el-button>
                <el-button class="elBtn" type="primary" @click="selectData(2)">查看历史审核数据</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" max-height="88%" border style="width: 100%" >
            <el-table-column type="index" min-width="3%" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名称" min-width="15%"  align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="oldRoleName" label="原角色" min-width="15%"  align="center" :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="roleName" label="变更为"  min-width="15%" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="status" label="审核状态"  min-width="15%" align="center" :show-overflow-tooltip="true" :formatter="this.$common.statusFormat"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"  min-width="15%" align="center" :show-overflow-tooltip="true" :formatter="this.$common.dateFormat"> </el-table-column>
            <el-table-column prop="op" label="操作" min-width="20%" align="center" v-if="ifShow">
                <template slot-scope="scope">
                    <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="openDialog(scope.$index, scope.row,1)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="pagesizes"
			:page-size="pagesize"
			:total="totalNum"
            @current-change="changePage"
            @size-change="sizeChange"
			>
		</el-pagination>

        <el-dialog title="角色变更审核" :visible.sync="dialogFormVisible" width="50%" center @close="clearForm">
            <el-form ref="form" :model="form">
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="userName">
                    <el-input class="elInput" v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="原角色" :label-width="formLabelWidth" prop="sex">
                    <el-input class="elInput" v-model="form.oldRoleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="变更为" :label-width="formLabelWidth" prop="phone">
                    <el-input class="elInput" v-model="form.roleName" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="审核" :label-width="formLabelWidth" prop="phone">
                    <el-radio class="elRadio" v-model="form.status" label="2" text-color="#ccc">通过</el-radio>
                    <el-radio class="elRadio" v-model="form.status" label="3" text-color="#ccc">不通过</el-radio>
                </el-form-item>
                <el-form-item label="批注" :label-width="formLabelWidth" prop="email">
                    <el-input type="textarea" class="elInput" v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="saveChange">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确定删除这条用户信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="doDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    

</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false, // 控制修改对话框的显示隐藏
            centerDialogVisible:false, // 控制删除提示框的显示隐藏
            pagesizes:[1,15,20,25],
            pagesize:1,// 每页条数
            currpage: 1, // 当前页
            totalNum:0, // 总条数
            key: '',// 查询参数
            tableData: [], // 页面数据
            form: { // 表单参数
                userId:"",
                oldRoleId:"",
                userName: '',
                roleName: "",
                status:"2",
                description:""
            },
            ifShow:true,
            selectType:0,
            formLabelWidth: '30%', // label宽度
            clientHeight:"" // 屏幕高度
      }
    },
    created(){
        // 获取屏幕高度
        this.clientHeight = this.$common.getClientHeight()
        this.pagesize = Math.ceil((this.clientHeight - 265)/55)
        this.pagesizes[0] = this.pagesize

        // 数据初始化
        this.selectData(0)
    },
    
    methods:{
        // 初始化数据
        selectData(status){
            this.selectType = status
            this.ifShow = (status == 0)?true:false
            const params = {
                key:this.key,
                page:this.currpage,
                limit:this.pagesize,
                status:status
            }
            this.$api.selectAudit(params)
            .then(result => {
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                   if(result.data.success){
                        _this.tableData = result.data.data.list
                        _this.totalNum = result.data.data.total
                    }
                })
            })
        },
        // 打开对话框
        openDialog(index,row,type){
            if(type == 1){
                this.dialogFormVisible = true
                // 单条查询数据
                this.$api.selectAuditById({params:{id:row.id}})
                .then(result => {
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        if(result.data.success){
                            _this.form = result.data.data
                            _this.form.status = _this.form.status?_this.form.status:"2"
                        }
                    })
                })
            }else{
                this.centerDialogVisible = true
            }
        },
        // 审核结果保存
        saveChange(){
            this.form.status = parseInt(this.form.status)
            this.$api.updateAudit(this.form)
            .then(result => {
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.clearForm()
                        _this.selectData(0)
                        _this.$message({center: true,message:result.data.message?result.data.message:"操作成功",type: 'success'});
                    }else{
                        this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                    }
                })
            })
        },
        // 删除数据
        doDelete(){
            this.$api.updateAudit(this.form)
            .then(result => {
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.clearForm()
                        _this.selectData(0)
                        _this.$message({center: true,message:result.data.message?result.data.message:"操作成功",type: 'success'});
                    }else{
                        this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                    }
                })
            })
        },
        // 清空表单
        clearForm(){
            this.dialogFormVisible = false
            this.centerDialogVisible = false
            // 清楚表单数据
            for(let item in this.form){
                this.form[item] = ""
            }
            this.form.status = "2"
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectData(this.selectType)
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectData(this.selectType)
        }
    },
}
</script>

<style lang="scss" scoped>
.tableContainer{
    height: 96%;
    padding: 10px;
    background: #FDFDFD;
    border-radius: 5px;
    .el-pagination.is-background{
        text-align: right;
        padding:10px 5px;
    }
    .el-table,.el-table th, .el-table tr{
        background: transparent !important;
    }
}
</style>